<template>
  <view>
    <u-form class="item" style="padding: 0 20rpx 110rpx;" :model="ruleForm" ref="uform" :rules="rules"
            label-width="auto">

      <u-form-item label="项目名称" borderBottom>
        <u-input v-model="ruleForm.feeName" border="none" inputAlign="right" placeholder="请输入"/>
      </u-form-item>

      <u-form-item label="应收金额（元）" borderBottom prop="receivableAmount">
        <u-input v-model="ruleForm.receivableAmount" border="none" inputAlign="right" placeholder="请输入"/>
      </u-form-item>

      <u-form-item label="付款对象" borderBottom @click="handleShow">
        <u-input v-model="ruleForm.receivableObjName" disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请输入" type="select" :select-open="actionSheetShow"/>
        <u-icon slot="right" name="arrow-right"/>
      </u-form-item>

      <u-form-item label="收款日期" borderBottom @click="pickerShow(1)">
        <u-input v-model="ruleForm.receivedTime" disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请选择收款日期" type="select" :select-open="actionSheetShow"/>
        <u-icon slot="right" name="arrow-right"/>
      </u-form-item>

      <u-form-item label="生成应收账单" borderBottom>
        <view style="display: flex;justify-content: flex-end">
          <u-switch v-model="ruleForm.isGenerateReceivableBill" :active-value="1" :inactive-value="0" size="20"/>
        </view>
      </u-form-item>

      <u-form-item label="应付金额（元）" borderBottom prop="payableAmount">
        <u-input v-model="ruleForm.payableAmount" border="none" inputAlign="right" placeholder="请输入"/>
      </u-form-item>

      <u-form-item label="收款对象" borderBottom>
        <u-input v-model="ruleForm.paymentObjName" border="none" inputAlign="right" placeholder="请输入"/>
      </u-form-item>

      <u-form-item label="付款日期" borderBottom @click="pickerShow(2)">
        <u-input v-model="ruleForm.payTime" disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请选择付款日期" type="select" :select-open="actionSheetShow"/>
        <u-icon slot="right" name="arrow-right"/>
      </u-form-item>

      <u-form-item label="生成应付账单" borderBottom>
        <view style="display: flex;justify-content: flex-end">
          <u-switch v-model="ruleForm.isGeneratePayableBill" :active-value="1" :inactive-value="0" size="20"/>
        </view>

      </u-form-item>

      <u-form-item borderBottom>
        <text style="text-align: right;color: red" @click="handleDele">删除</text>
      </u-form-item>


    </u-form>

    <u-datetime-picker
        v-model="valueTime" :show="showTime" mode="date" @confirm="confirmTime" @cancel="showTime=false">
    </u-datetime-picker>

    <u-picker :show="payeeShow" :columns="columnsList" keyName="customerName"
              @confirm="payeeConfim" @cancel="payeeShow=false"/>
  </view>
</template>

<script>
export default {
  name: 'collapsePage',
  props: {
    value: {
      type: Object,
      default: {}
    },
    payeeList: {
      type: Array,
      default: []
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    }
  },
  watch: {},
  data() {
    return {
      showTime: false,
      valueTime: '',
      typeTime: '',
      rules: {
        receivableAmount:[
          {
            validator: (rule, value, callback) => {
              return   /^(?:[1-9]\d*|0)(?:\.\d{0,2})?$/.test(value);
            },
            message: '请输入整数或者保留两位小数',
            trigger: ['change', 'blur'],
          }
        ],
        payableAmount:[
          {
            validator: (rule, value, callback) => {
              return   /^(?:[1-9]\d*|0)(?:\.\d{0,2})?$/.test(value);
            },
            message: '请输入整数或者保留两位小数',
            trigger: ['change', 'blur'],
          }
        ]
      },
      payeeShow: false,
      columnsList: []
    };
  },
  created() {
  },
  mounted() {
    this.columnsList = [this.payeeList]
  },
  methods: {


    handleShow() {
      this.payeeShow = true
    },

    payeeConfim(val) {
      console.log(val,"-=-=-=")
      this.value.receivableObjName = this.ruleForm.receivableObjName = val.value[0].customerName
      this.payeeShow = false
    },

    handleDele() {
      this.$emit('delete')
    },

    pickerShow(type) {
      this.showTime = true;
      this.typeTime = type;
    },

    confirmTime(e) {
      let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      if (this.typeTime === 1) {
        this.value.receivedTime = this.ruleForm.receivedTime = timeStr;
      }
      if (this.typeTime === 2) {
        this.value.payTime = this.ruleForm.payTime = timeStr;
      }
      this.showTime = false;
    }
  },
};
</script>

<style scoped lang=""></style>


